<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script src="js/axios.js"></script>
    <script src="js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="css/login.css">
</head>
<body>
<div id="app">
    <div class="loginBox">
        <el-form ref="logonFrom"  :model="logonFrom" :rules="rules" label-position="right"  label-width="80px" >
            <el-form-item prop="userName"  label="用户名：">
                <el-input prefix-icon="el-icon-s-custom" v-model="logonFrom.userName" placeholder="请输入用户名" class="formInput"></el-input>
            </el-form-item>
            <el-form-item prop="passWord"  label="密码：">
                <el-input prefix-icon="el-icon-s-opportunity" v-model="logonFrom.passWord" placeholder="请输入密码" class="formInput"></el-input>
            </el-form-item>
            <el-form-item prop="code"  label="验证码：">
                <el-input  v-model="logonFrom.code" placeholder="请输入验证码" class="codeInput"></el-input>
                <span id="check" class="checkCode" @click="createCode">{{ checkCode}}</span>
            </el-form-item>
        </el-form>
        <el-button type="primary" @click="logon">登录</el-button>
    </div>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            logonFrom: {
                userName: '',
                passWord: '',
                code: '',
            },
            checkCode: '',
            rules: {
                userName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
                passWord: [{ required: true, message: "请输入密码", trigger: "blur" }],
                code: [{ required: true, message: "请输验证码", trigger: "blur" }]
            }
        },
        created() {
            this.createCode()
        },
        methods: {
            // 登录
            logon() {
            },
            drawLine (ctx) {
                // 绘制干扰线
                for (let i = 0; i < 4; i++) {
                    ctx.strokeStyle = this.randomColor(100, 200)
                    ctx.beginPath()
                    ctx.moveTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight))
                    ctx.lineTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight))
                    ctx.stroke()
                }
            },
            drawDot (ctx) {
                // 绘制干扰点
                for (let i = 0; i < 30; i++) {
                    ctx.fillStyle = this.randomColor(0, 255)
                    ctx.beginPath()
                    ctx.arc(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight), 1, 0, 2 * Math.PI)
                    ctx.fill()
                }
            },
        // 图片验证码
            createCode(){
                // 先清空验证码的输入
                this.code = "";
                this.checkCode = "";
                this.picLyanzhengma = "";
                //验证码的长度
                var codeLength = 4;
                //随机数
                var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');
                for(var i = 0; i < codeLength; i++) {
                    //取得随机数的索引（0~35）
                    var index = Math.floor(Math.random()*36);
                    //根据索引取得随机数加到code上
                    this.code += random[index];
                }
                //把code值赋给验证码
                this.checkCode = this.code;
            }
        }
    })
</script>
</html>